<template>
	<div>
		<el-row :gutter="10">
			<el-col :span="5"><el-input v-model="query.documentName" placeholder="请输入要查询的课程"></el-input></el-col>
			<el-col :span="19">
				<el-button type="primary" icon="el-icon-search" plain @click="getData()">搜索</el-button>
				<el-button type="primary" icon="el-icon-circle-plus-outline" plain @click="add()">添加文件到</el-button>
				<el-select v-model="name" filterable placeholder="请选择课程">
					<el-option v-for="item in options" :key="item.id" :label="item.title" :value="item.title">
					</el-option>
				</el-select>
			</el-col>
		</el-row>
		<el-table :data="result.tableData" style="width: 100%" >
			<el-table-column label="ID" width="60" prop="id"></el-table-column>
			<el-table-column label="文件名" width="180" prop="documentName"></el-table-column>
			<el-table-column label="所属课程"  prop="courseName"></el-table-column>
			<el-table-column label="原始文件名" width="250" prop="originalName"></el-table-column>
			<el-table-column label="文件类型" width="160" prop="fileType"></el-table-column>
			<el-table-column label="上传者" prop="uploader"></el-table-column>
			<el-table-column label="大小" prop="size"></el-table-column>
			<el-table-column label="创建日期" width="180" prop="createtime">
			</el-table-column>
			<el-table-column label="操作" width="120px">
				<template slot-scope="scope">
					<template>
						<el-button size="mini" type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
					</template>
				</template>
			</el-table-column>
		</el-table>
		
		<el-dialog :title="title" :visible.sync="show" :close-on-click-modal="false" width="500px">
			<Upload v-if="show" :show.sync="show" @getData="getData()" :uploadCourse="name" ></Upload>
		</el-dialog>
		<el-pagination
		    style="margin-top:20px;"
		    background
		    layout="prev, pager, next"
		    :page-count="result.pages"
		    :current-page.sync="query.pageNo"
		    :page-size="query.pageSize"
		    @current-change="getData()"
		></el-pagination>
	</div>
</template>

<script>
	import Upload from "./components/upload.vue"
import axios from '@/utils/axiosutils.js';
export default {
	name: 'courseDocument',
	data() {
		return {
			options: [],
			title:"",
			show:false,
			name:"",
			query: {
			  documentName: '',
			  pageNo: 1,
			  pageSize: 8
			},
			result: {
			  tableData: [],
			  pages: 0
			},
		};
	},
	components: {
		Upload
	},
	created() {
		this.item();
		this.getData()
	},
	methods: {
		add(){
			if(this.name!=""){
				this.title="上传文件";
				this.show=true;
			}else{
				this.$message.warning("还未选择课程")
			}			
		},
		getData(){
			axios.get("document/list",response=>{
				this.result.tableData = response.obj.records;
				this.result.pages = response.obj.pages;
			},this.query)
			
		},
		item() {
			axios.post("course/courseItem", resp => {
				this.options = resp.obj;
			})
		},
		handleDelete(id){
			axios.post("document/deleteById", resp => {
				this.$message.success("删除成功！")
				this.getData();
			},{id:id})
		}
	}
};
</script>
<style scoped></style>
